<!DOCTYPE html>
<html>
  <head>
    <% include global/meta.html %>
    <% include global/top-css.html %>
    <title>yuscms</title>
</head>
  <body>

        <main class="main" data-info="<%=admin.permission%>">
			
            <div class="ys-admin-pos c-a1a3aa">
                首页<span class="f-sum">></span><span class="c-565b6d">文章管理</span>
              </div>
              <div class="ys-admin-tablist">
                  <div class="ys-admin-tab-header row justify-content-b">
          
                      <div class="row col-10 ml-10">
                          <div class="select flex row">
                              <select class="flex" name="pid" v-model="navid" v-html="optionRender()"></select>
                          </div>
                          <a @click="totalCountByCatory" javascript=":;" class="btn btn-sure w60 lh-28 text-c ml-6">搜索 </a> 
                      </div>
                      
                      <a href="/admin/article/add" class="btn-add"><i class="ico ico-plus f-16 pos-r">+</i>新增</a>
                  </div>
          
                  <div class="mr-10 ml-10" v-loading="loading">
                  <table class="table table-hover ml-10">
                        <thead class="table-th">
                            <tr>
                                <th></th>
                                <th>编号</th>
                                <th>标题</th>
                                <th>属性</th>
                                <th>文档类别</th>
                                <th>浏览次数</th>
                                <th>发布时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                       
                        <tbody class="table-border">
                            <tr v-for="item in list" :key="item.id">
                                <td><input type="checkbox" :value="item.id" v-model="checkbox" class="checkbox"></td>
                                <td>{{item.id}}</td>
                                <td><a :href="'/article/'+item.id" class="nowrap" target="_blank">{{item.title}}</a></td>
                                <td>{{item.attr}}</td>
                                <td>{{item.nav_name}}</td>
                                <td>{{item.count}}</td>
                                <td>{{item.date}}</td>
                                <td>
                                  <a :href="'/admin/article/edit?id='+item.id"><i class="ico ico-edit mr-10 pos-r t-4"></i></a>
                                  <a href="javascript:;" @click="del(item.id)"><i class="ico ico-del pos-r t-4"></i></a>　　
                                 </td>
                            </tr>
                       </tbody>
                  </table>
                  
                  <div class="row justify-content-b">
                    <span class="mt-15 mb-35 c-3b4364" v-if="list.length>0">{{checkbox}}
                    <input type="checkbox" v-model="checked" @click="checkedAll"  class="checkbox ml-17 mr-15">
                    <el-button type="text" @click="confirm">批量删除</el-button>
                    </span>
                    <div v-else class="f-14 flex text-c mt-20 c-a1a3aa"> 暂无内容</div>
                    <div id="page" class="mt-15 row mr-25">
                    </div>      
                  </div>
                  </div>
              </div>
        </main>
     
	<% include global/all-js.html %>
	<script>
		var vm = new Vue({
			el:'.main',
			data:{
        loading: true,
        default: 1, //全部 1 category 2
        navid: 0,
        totalCounts: 0,
        pageNo: $m.getParams('page') || 1,
        totalPage: 0,
        category: [],
        list: [], //渲染页面的列表数据
        checked: false, //全选
        checkbox: [] //选择的数据
			},
			methods:{
			
        getData() {
      var _this = this;
      axios
        .get("/api/admin/category")
        .then(data => {
          var filterData = data.data;
          if (filterData.success) {
            _this.category = filterData.data;
            _this.loading = false;
          } else {
            location.href = "/admin/login";
          }
        })
        .catch(error => {
          console.error(error);
        });
    },

    optionRender: function() {
      let list = this.category;
      let str = '<option selected="selected" value="0">所有栏目</option>';

      function option(list) {
        for (var item of list) {
          if (item.pid != 0) {
            str += `<option value="${item.id}${"," +
              item.level}">${"&nbsp;&nbsp;".repeat(
              item.level
            )}|-${item.nav_name}</option>`;
          } else {
            str += `<option value="${item.id}${"," +
              item.level}">${item.nav_name}</option>`;
          }
          if (item.children) {
            option(item.children);
          }
        }
      }
      option(list);
      return str;
    },

    totalCount() {
      var _this = this;
      //获取所有数量
      axios
        .get("/api/admin/article/getAllCount")
        .then(data => {
          let filterData = data.data;
          if (filterData.success) {
            _this.totalCounts = filterData.data[0].count;
            _this.queryArticle();
          }
        })
        .catch(error => {
          console.error(error);
        });
    },

    totalCountByCatory() {
      var _this = this;
      if (_this.navid == 0) {
        _this.default = 1;
        _this.totalCount();
        return;
      }

      _this.default = 2;
      //获取所有数量
      axios
        .get("/api/admin/article/getCountByCategory", {
          params: {
            nav: _this.navid.toString().includes(",")
              ? _this.navid.split(",")[0]
              : _this.navid
          }
        })
        .then(data => {
          let filterData = data.data;
          if (filterData.success) {
            _this.totalCounts = filterData.data[0].count;
            _this.queryArticleByCategoryId();
          }
        })
        .catch(error => {
          console.error(error);
        });
    },

    queryArticle() {
      var _this = this;
      //获取所有数量
      axios
        .get("/api/admin/article/queryArticle", {
          params: {
            pageNo: _this.pageNo,
            count: _this.totalCounts
          }
        })
        .then(data => {
          let filterData = data.data;
          if (filterData.success) {
            //清空数据
            _this.list.splice(0);
            //清空全选
            _this.checked = false;
            //清空选择的数据
            _this.checkbox = [];

            _this.list = filterData.data;
            _this.totalPage = filterData.totalPage;
            _this.page();
          }
        })
        .catch(error => {
          console.error(error);
        });
    },

    queryArticleByCategoryId: function() {
      var _this = this;
      _this.pageNo = 1;
      //获取所有数量
      axios
        .get("/api/admin/article/queryArticleByCategoryId", {
          params: {
            pageNo: _this.pageNo,
            count: _this.totalCounts,
            id: _this.navid.toString().includes(",")
              ? _this.navid.split(",")[0]
              : _this.navid
          }
        })
        .then(data => {
          let filterData = data.data;
          if (filterData.success) {
            //清空数据
            _this.list.splice(0);
            //清空全选
            _this.checked = false;
            //清空选择的数据
            _this.checkbox = [];
            _this.list = filterData.data;
            _this.totalPage = filterData.totalPage;
            _this.page();
          }
        })
        .catch(error => {
          console.error(error);
        });
    },
    page: function() {
      var _this = this;
      if (_this.pageNo <= 0) {
        _this.pageNo = 1;
      }
      if (_this.pageNo > _this.totalPage) {
        _this.pageNo = _this.totalPage;
      }
      document.querySelector("#page").innerHTML = "";
      Page({
        num: parseInt(_this.totalPage), //页码数
        startnum: _this.pageNo, //指定页码
        elem: $("#page"), //指定的元素
        callback: function(n) {
          //回调函数
          _this.pageNo = n;
          location.hash = "/article?page=" + n;
          if (_this.default == 1) {
            _this.queryArticle();
          } else {
            _this.queryArticleByCategoryId();
          }
        }
      });
    },

    del(id) {
      let _this = this;
      if (!hasPermission("3")) {
        tipsWarn(_this, "对不起,您没有操作权限^_^");
        return;
      }
      axios
        .post("/api/admin/article/del", {
          id: id
        })
        .then(data => {
          let filterData = data.data;
          if (filterData.success && filterData.data.affectedRows >= 1) {
            tips(_this, "删除成功！");
            //清空全选
            _this.checked = false;
            //清空选择的数据
            _this.checkbox = [];

            if ((_this.default = 1)) {
              _this.queryArticle();
            } else {
              _this.queryArticleByCategoryId();
            }
          }
        })
        .catch(error => {
          console.error(error);
        });
    },
    confirm() {
      let _this = this;
      if (_this.checkbox.length == 0) {
        tipsWarn(_this, "未选择任何数据！");
        return;
      }
      this.$confirm("确定删除选择该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          _this.del(_this.checkbox);
        })
        .catch(() => {
          tipsInfo(_this, "已取消删除！");
        });
    },
    checkedAll: function() {
      var _this = this;
      if (this.checked) {
        _this.checkbox = [];
      } else {
        _this.checkbox = [];
        _this.list.forEach(function(item) {
          _this.checkbox.push(item.id);
        });
      }
    }
  },
  beforeRouteUpdate(to, from, next) {
    this.pageNo = to.query.page;
    if ((this.default = 1)) {
      this.queryArticle();
    } else {
      this.queryArticleByCategoryId();
    }

    next();
  },
  computed: {},

  watch: {
    checkbox: {
      handler: function(val, oldval) {
        if (this.checkbox.length === this.list.length) {
          this.checked = true;
        } else {
          this.checked = false;
        }
      },
      deep: true
    },
    list: {
      //对数组和对象属性修改 监听无效 需要单独设置 https://cn.vuejs.org/v2/guide/list.html#数组更新检测
      handler: function(val, oldval) {
      },
      deep: true
    }
  },
  created: function() {
    this.getData();
    this.totalCount();
  },
  mounted: function() {}
		});
	</script>	
	</body>
</html>
